<template>
	<view class="page">
		<view class="header">
			<view class="header-tar flex">
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/agent_jewel/maker_coupon_give?type=17" class="header-tar-item">
					<view class="header-tar-item-num">{{limitData.company_recharge||0}}</view>
					<view class="header-tar-item-text">授信额度</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/agent_jewel/maker_coupon_give?type=18" class="header-tar-item">
					<view class="header-tar-item-num">{{limitData.myself_recharge||0}}</view>
					<view class="header-tar-item-text">享宝额度</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/agent_jewel/maker_coupon_record?pageType=limit" class="header-tar-item">
					<view class="header-tar-item-num">&nbsp;</view>
					<view class="header-tar-item-text">额度明细</view>
				</navigator>
			</view>
		</view>
		<view class="coupon-cont">
			<view class="coupon-cont-give">
				<view class="coupon-cont-give-title flex">
					<image class="coupon-cont-give-title-icon" src="../../../static/images/jewel/coupon_friend.png"></image>
					<text>送好友红包</text>
				</view>
				<view class="coupon-cont-give-item coupon-cont-give-item-first flex">
					<view class="coupon-cont-give-item-name">对方ID</view>
					<input class="coupon-cont-give-item-idinput" type="number" placeholder="请输入对方ID" v-model="member_id" />
				</view>
				<view class="coupon-cont-give-item coupon-cont-give-item-second">
					<view class="coupon-cont-give-item-name name">可转出红包券</view>
					<input class="coupon-cont-give-item-noinput" type="number" placeholder="请输入或复制红包券编号" v-model="coupon_no" />
				</view>
			</view>
			<view class="coupon-cont-title flex">
				<view class="flex">
					<image class="coupon-cont-title-icon" src="../../../static/images/jewel/coupon_ticket.png"></image>
					<text class="coupon-cont-title-text">券</text>
				</view>
				<navigator open-type="navigate" url="/pages/jewel/agent_jewel/maker_coupon_all" hover-class="none" class="flex coupon-cont-title-all">查看全部<arrow direction="right" size="40" color="#9c908f"></arrow></navigator>
			</view>
			<view class="coupon-cont-list">
				<view class="coupon-cont-list-item" v-for="(item,index) in rewardList" :key="index">
					<view class="coupon-cont-list-item-no">NO: {{item.coupon_no}}<text class="coupon-cont-list-item-red" @tap="copyVal(item.coupon_no)">复制</text></view>
					<view class="coupon-cont-list-item-info flex">
						<view class="coupon-cont-list-item-info-left flex">
							<image class="coupon-cont-list-item-info-pack" src="../../../static/icons/redpacket.png"></image>
							<view>
								<view class="coupon-cont-list-item-info-money">￥{{item.amount}}</view>
								<view class="coupon-cont-list-item-info-time">有效期:{{item.expired_time_text}}</view>
							</view>
						</view>
						<view class="coupon-cont-list-item-info-num">{{item.state_text}}</view>
					</view>
				</view>
				<view v-if="rewardList.length === 0" class="coupon-cont-list-nodata">暂无可用红包券</view>
			</view>
			
		</view>
		<view style="width: 100%;height: 108rpx;"></view>
		<view class="coupon-giveOut" @tap="giveOut">转出</view>
		
		<view class="m-full-loading" v-if="showLoading">
		    <view class="m-loading">
		        <image src="../../../static/images/loading.gif"></image>
		    </view>
		</view>
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				showLoading: false,
				rewardList:[],
				couponNum:0,
				coupon_no:'',
				member_id:'',
				data:{},
				limitData:{}
			};
		},
        methods: {
			copyVal(data){
				uni.setClipboardData({
					data: data,
					success: function () {
						uni.showToast({
							title:'复制成功'
						})
					}
				});
			},
			giveOut(){
				let that = this
				jewel.post('maker/give',{coupon_no:that.coupon_no,to_uid:that.member_id},true,function(res){
					jewel.showToast(res.data.msg,res.data.code==0?1500:3000)
					if(res.data.code == 0) setTimeout(()=>{that.getDataList()},1500)
				});
			},
			getlimitData(){
				let that = this
				jewel.get('Maker/income_count',{},true,function(res){
					that.limitData = res.data.data
				});
			},
			getDataList(){
				let that = this
				that.showLoading = true
				jewel.get('Maker/coupon_list',{state:0},true,function(res){
					that.showLoading = false
					that.rewardList = res.data.data
				})
			}
        },
		onShow() {
			if(this.showLoading) return false
			this.getlimitData()
		},
        onLoad({couponNum}) {
			let that = this
			that.couponNum = couponNum
			that.getDataList()
			that.getlimitData()
        },
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				uni.navigateTo({
					url:'/pages/jewel/agent_jewel/maker_coupon_record?pageType=give'
				})
			}
		}
	}
</script>
<style lang="scss">
	.flex{
		display: flex;
	}
	.page{
		background-color: #FFFFFF;
		.header{
			color: #FFFFFF;
			height: 210rpx;
			align-items: center;
			background-image: url(@/static/images/jewel/m_coupon_bg.jpg);
			background-size: cover;
			background-repeat: no-repeat;
			&-tar{
				justify-content: center;
				align-items: flex-end;
				height: 100%;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				&-item{
					text-align: center;
					line-height: 35rpx;
					flex: 1;
					&-text{
						font-size: 30rpx;
					}
					&-num{
						font-size: 43rpx;
						height: 34rpx;
						margin-bottom: 10rpx;
					}
				}
			}
			&-bg{
				position: absolute;
				top: 0;
				left: 0;
				width: 750rpx;
				height: 383rpx;
				z-index: -2;
			}
		}
		.coupon-cont{
			position: relative;
			z-index: 2;
			&-title{
				justify-content: space-between;
				align-items: center;
				padding: 34rpx 38rpx 26rpx 42rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				&-icon{
					width: 42rpx;
					height: 42rpx;
					margin-right: 14rpx;
				}
				&-text{
					color: #000000;
					font-size: 36rpx;
				}
				&-all{
					color: #7f7f7f;
					font-size: 28rpx;
				}
			}
			&-list{
				&-item{
					width: 700rpx;
					height: 194rpx;
					margin: 0 auto;
					background-color: #FFFFFF;
					border-radius: 5px;
					box-shadow:0px 0px 29rpx rgba(214,214,214,0.24);
					overflow: hidden;
					margin-bottom: 20rpx;
					&-no{
						text-align: right;
						color: #4e4e4e;
						font-size: 26rpx;
						border-bottom: 1px solid #e6e6e6;
						line-height: 56rpx;
						padding-top: 6rpx;
					}
					&-red{
						color: #d71511;
						font-size: 26rpx;
						margin: 0 30rpx 0 18rpx;
					}
					&-info{
						justify-content: space-between;
						align-items: center;
						height: 130rpx;
						&-left{
							align-items: center;
							margin-left: 40rpx;
						}
						&-pack{
							width: 63rpx;
							height: 72rpx;
							display: block;
							margin-right: 22rpx;
						}
						&-money{
							color: #353535;
							font-size: 41rpx;
						}
						&-time{
							color: #333333;
							font-size: 28rpx;
						}
						&-num{
							color: #d71511;
							font-size: 33rpx;
							margin-right: 32rpx;
							text{
								font-size: 62rpx;
							}
						}
					}
				}
				&-nodata{
					text-align: center;
					font-size: 32rpx;
				}
			}
			&-give{
				margin-top: 40rpx;
				&-title{
					align-items: center;
					color: #000000;
					font-size: 36rpx;
					padding-left: 43rpx;
					&-icon{
						width: 41rpx;
						height: 34rpx;
						margin-right: 15rpx;
					}
				}
				&-item{
					color: #000000;
					&-name{
						font-size: 34rpx;
					}
					&-first{
						border-bottom: 1px solid #eaeaea;
						height: 82rpx;
						align-items: center;
						width: 700rpx;
						margin: 0 auto;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
					&-idinput{
						margin-left: 28rpx;
						flex: 1;
					}
					&-second{
						margin-left: 42rpx;
						.name{
							line-height: 96rpx;
						}
					}
					&-noinput{
						background-color: #eaeaea;
						border-radius: 5px;
						width: 614rpx;
						padding: 15rpx 25rpx;
						font-size: 26rpx;
					}
				}
			}
		}
		.coupon-giveOut{
			width: 100%;
			position: fixed;
			z-index: 2;
			bottom: 0;
			left: 0;
			background-color: rgb(215, 21, 17);
			line-height: 88rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	
</style>
